﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link href="css/reset.css" rel="stylesheet" type="text/css" />
<link href="css/text.css" rel="stylesheet" type="text/css" />
<link href="css/grid_960_16_col.css" cssMode="960" rel="stylesheet" type="text/css" />
<link href="css/global.css" rel="stylesheet" type="text/css" />
<link href="css/sub_shoppingcart.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.22.custom.min.js"></script>
<script type="text/javascript" src="js/init.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        jpInit();
        $(".draggable").draggable({ opacity: 0.5, revert: true, revertDuration: 200, scrollSpeed: 0, containment: 'document'});
        $(".droppable").droppable();
        //$( ".droppable" ).droppable({
        //	activeClass: "ui-state-hover",
        //	hoverClass: "ui-state-active",
        //	drop: function( event, ui ) {
        //		$( this )
        //			.addClass( "ui-state-highlight" )
        //	}
        //});

        // 放下
        //$(".droppable").droppable({
        //drop: function(event, ui) { alert(ui.draggable.attr('id')); }
    });

    // 进入
    $(".droppable").bind("dropover", function (event, ui) {
        //        alert(ui.draggable.parent().attr('style'));
        //        if ($('this') == ui.draggable.parent()) {
        //            
        //        } else {

        //        }
    });

</script>
<style type="text/css">
.testingcss{
	border:5px dotted #FFF;
}
.beatsbadge {
	background:url(img/badge.png);
	display:inline-block;
	height:45px;
	position:absolute;
	right:0;
	top:0;
	width:45px;
}
.beatsbadge:link {
	
}
.beatsbadge:visited {
	
}
.beatsbadge:hover {
	background-position: left -45px;
}

</style>
<title>1200px Testing</title>
</head>

<body>
<div class="top">
	<div class="container_16">
		<div class="grid_16">
			<a href="#" class="logo"></a>
			<div class="menu_links">
				<a href="#" class="menu_link">HOME</a>
				<a href="#" class="menu_link">ALL BRANDS</a>
				<a href="#" class="menu_link">E-GREETINGS</a>
				<a href="#" class="menu_link">NEW ARRIALS</a>

			</div>
			<div class="toptip">
				<div class="toptip_item rightfloat">
					<div class="toptip_wrap radiusbottomright_4px">
						<span class="toptip_label leftfloat">Currencies <strong class="white">$USD</strong></span>
						<div class="ddl_btn"></div>
					</div>
				</div>
				
				<div class="toptip_item rightfloat">
					<div class="toptip_wrap radiusbottomleft_4px">
						<div class="toptip_label">Cart Items <a href="#" class="toptip_label_number green">4</a></div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<div class="top_bar realshadow_bottom radiusbottomleft_4px radiusbottomright_4px">
	<div class="container_16">
		<div class="grid_16">
			<div class="search_bar radiusall_4px">
				<input type="text" class="search_txt green"/>
				<input type="button" class="btn search_btn radiusall_2px" value="Find"/>
			</div>
			<div class="login_bar">
				<div class="login_links">
					<a href="#" class="bold">Join us</a>
					<span> - or - </span>
					<a href="#" class="bold">Log in</a>				
				</div>
				<a href="#" style="margin-top:15px;margin-left:8px;display:inline-block;background:url(img/facebook.png);width:150px;height:22px;"></a>
			</div>
			
		</div>
	</div>
</div>

<div class="container_16 shoppingcart">
	<div class="clear_30px"></div>
	<div class="grid_16 textshadow"><h1>Shopping Cart</h1></div>
	<div class="clear_30px"></div>
	<div class="grid_8">
		<div class="radiusall_4px shadowbox relative shoppingcart_package droppable" id="outer">
			<div class="radiustopleft_4px radiustopright_4px opacity85 white textshadow_black shoppingcart_packbadge">
				<span class="font088em">Package No.</span>
                <span class="font14px">1</span> 
                <a href="#" title="remove this package" class="shoppingcart_packremove"></a>
			</div>
			
			<div style="background:#fdf59d;margin:5px;border:1px #ead06a solid;padding:10px;" class="shadowbox radiusall_4px">
				Here is the information of shipping address.
			</div>
			
			<div class="clear_5px"></div>
			
			<div class="shoppingcart_cartitem radiusall_4px draggable">
				<a href="#" class="beatsbadge"></a>
				<div class="cell" style="position:absolute;left:10px;">
					<a href="#"><img width="80" src="http://thumbs1.ebaystatic.com/m/mf88mB523VXt_gWOwnh2ofQ/140.jpg"/></a>
				</div>
				<div class="cell" style="margin-left:95px;">
					<a href="#" class="bold">Beats Studio - Lakers Kobe</a>
					<br/>
					<span class="lightgray" style="*width:300px;display:inline-block;">Monster Beats Studio High Defination Headphones Lakers 24th Kobe....</span>
                    <div class="clear_5px"></div>
                    <div class="font12px" style="margin-top:0px;">
                    	<span>Qty</span> &nbsp; <input type="text" style="width:40px;display:inline-block;background:#F8F8F8;text-align:center;border:1px #D8D8D8 solid;font-size:12px;padding:1px;color:gray" />
                    	<span style="display:inline-block;margin:0 8px;color:lightgray;font-weight:bold">|</span>
                    	<span>Amount</span> &nbsp; <span class="skyblue" style="display:inline-block;font-weight:bold;">$233.95</span>
                    	<span style="display:inline-block;margin:0 8px;color:lightgray;font-weight:bold">|</span>
                    	<input type="button" class="btn deletebtn" style="font-size:12px;" value="delete"/>
                    </div>
				</div>
				
				<div class="textshadow shoppingcart_dragbtn">Drag me and drop</div>
			</div>

			<div class="clear_5px"></div>
			
			<div class="shoppingcart_cartitem radiusall_4px draggable">
				<a href="#" class="beatsbadge"></a>
				<div class="cell" style="position:absolute;left:10px;">
					<a href="#"><img width="80" src="http://thumbs1.ebaystatic.com/m/mf88mB523VXt_gWOwnh2ofQ/140.jpg"/></a>
				</div>
				<div class="cell" style="margin-left:95px;">
					<a href="#" class="bold">Beats Studio - Lakers Kobe</a>
					<br/>
					<span class="lightgray" style="*width:300px;display:inline-block;">Monster Beats Studio High Defination Headphones Lakers 24th Kobe....</span>
                    <div class="clear_5px"></div>
                    <div class="font12px" style="margin-top:0px;">
                    	<span>Qty</span> &nbsp; <input type="text" style="width:40px;display:inline-block;background:#F8F8F8;text-align:center;border:1px #D8D8D8 solid;font-size:12px;padding:1px;color:gray" />
                    	<span style="display:inline-block;margin:0 8px;color:lightgray;font-weight:bold">|</span>
                    	<span>Amount</span> &nbsp; <span class="skyblue" style="display:inline-block;font-weight:bold;">$233.95</span>
                    	<span style="display:inline-block;margin:0 8px;color:lightgray;font-weight:bold">|</span>
                    	<input type="button" class="btn deletebtn" style="font-size:12px;" value="delete"/>
                    </div>
				</div>
				
				<div class="textshadow shoppingcart_dragbtn">Drag me and drop</div>
			</div>
			
			<div class="clear_5px"></div>
			
			<div class="shoppingcart_cartitem radiusall_4px draggable">

				<div class="cell" style="position:absolute;left:10px;">
					<a href="#"><img width="80" src="http://thumbs1.ebaystatic.com/m/mf88mB523VXt_gWOwnh2ofQ/140.jpg"/></a>
				</div>
				<div class="cell" style="margin-left:95px;">
					<a href="#" class="bold">Beats Studio - Lakers Kobe</a>
					<br/>
					<span class="lightgray" style="*width:300px;display:inline-block;">Monster Beats Studio High Defination Headphones Lakers 24th Kobe....</span>
                    <div class="clear_5px"></div>
                    <div class="font12px" style="margin-top:0px;">
                    	<span>Qty</span> &nbsp; <input type="text" style="width:40px;display:inline-block;background:#F8F8F8;text-align:center;border:1px #D8D8D8 solid;font-size:12px;padding:1px;color:gray" />
                    	<span style="display:inline-block;margin:0 8px;color:lightgray;font-weight:bold">|</span>
                    	<span>Amount</span> &nbsp; <span class="skyblue" style="display:inline-block;font-weight:bold;">$233.95</span>
                    	<span style="display:inline-block;margin:0 8px;color:lightgray;font-weight:bold">|</span>
                    	<input type="button" class="btn deletebtn" style="font-size:12px;" value="delete"/>
                    </div>
				</div>
				
				<div class="textshadow shoppingcart_dragbtn">Drag me and drop</div>
			</div>

			
			<div class="clear_5px"></div>
			
			
			
		</div>
		
		<div class="clear_20px"></div>
		
		<div class="radiusall_4px shadowbox relative shoppingcart_package droppable" id="outer">
			<div class="radiustopleft_4px radiustopright_4px opacity85 white textshadow_black shoppingcart_packbadge">
				<span class="font088em">Package No.</span>
                <span class="font14px">1</span> 
                <a href="#" title="remove this package" class="shoppingcart_packremove"></a>
			</div>
			
			<div style="background:#fdf59d;margin:5px;border:1px #ead06a solid;padding:10px;" class="shadowbox radiusall_4px">
				Here is the information of shipping address.
			</div>
			
			<div class="clear_5px"></div>
			
			<div class="shoppingcart_cartitem radiusall_4px draggable">
				<a href="#" class="beatsbadge"></a>
				<div class="cell" style="position:absolute;left:10px;">
					<a href="#"><img width="80" src="http://thumbs1.ebaystatic.com/m/mf88mB523VXt_gWOwnh2ofQ/140.jpg"/></a>
				</div>
				<div class="cell" style="margin-left:95px;">
					<a href="#" class="bold">Beats Studio - Lakers Kobe</a>
					<br/>
					<span class="lightgray" style="*width:300px;display:inline-block;">Monster Beats Studio High Defination Headphones Lakers 24th Kobe....</span>
                    <div class="clear_5px"></div>
                    <div class="font12px" style="margin-top:0px;">
                    	<span>Qty</span> &nbsp; <input type="text" style="width:40px;display:inline-block;background:#F8F8F8;text-align:center;border:1px #D8D8D8 solid;font-size:12px;padding:1px;color:gray" />
                    	<span style="display:inline-block;margin:0 8px;color:lightgray;font-weight:bold">|</span>
                    	<span>Amount</span> &nbsp; <span class="skyblue" style="display:inline-block;font-weight:bold;">$233.95</span>
                    	<span style="display:inline-block;margin:0 8px;color:lightgray;font-weight:bold">|</span>
                    	<input type="button" class="btn deletebtn" style="font-size:12px;" value="delete"/>
                    </div>
				</div>
				
				<div class="textshadow shoppingcart_dragbtn">Drag me and drop</div>
			</div>

			<div class="clear_5px"></div>
			
			<div class="shoppingcart_cartitem radiusall_4px draggable">
				<a href="#" class="beatsbadge"></a>
				<div class="cell" style="position:absolute;left:10px;">
					<a href="#"><img width="80" src="http://thumbs1.ebaystatic.com/m/mf88mB523VXt_gWOwnh2ofQ/140.jpg"/></a>
				</div>
				<div class="cell" style="margin-left:95px;">
					<a href="#" class="bold">Beats Studio - Lakers Kobe</a>
					<br/>
					<span class="lightgray" style="*width:300px;display:inline-block;">Monster Beats Studio High Defination Headphones Lakers 24th Kobe....</span>
                    <div class="clear_5px"></div>
                    <div class="font12px" style="margin-top:0px;">
                    	<span>Qty</span> &nbsp; <input type="text" style="width:40px;display:inline-block;background:#F8F8F8;text-align:center;border:1px #D8D8D8 solid;font-size:12px;padding:1px;color:gray" />
                    	<span style="display:inline-block;margin:0 8px;color:lightgray;font-weight:bold">|</span>
                    	<span>Amount</span> &nbsp; <span class="skyblue" style="display:inline-block;font-weight:bold;">$233.95</span>
                    	<span style="display:inline-block;margin:0 8px;color:lightgray;font-weight:bold">|</span>
                    	<input type="button" class="btn deletebtn" style="font-size:12px;" value="delete"/>
                    </div>
				</div>
				
				<div class="textshadow shoppingcart_dragbtn">Drag me and drop</div>
			</div>
			
			<div class="clear_5px"></div>
			
			<div class="shoppingcart_cartitem radiusall_4px draggable">

				<div class="cell" style="position:absolute;left:10px;">
					<a href="#"><img width="80" src="http://thumbs1.ebaystatic.com/m/mf88mB523VXt_gWOwnh2ofQ/140.jpg"/></a>
				</div>
				<div class="cell" style="margin-left:95px;">
					<a href="#" class="bold">Beats Studio - Lakers Kobe</a>
					<br/>
					<span class="lightgray" style="*width:300px;display:inline-block;">Monster Beats Studio High Defination Headphones Lakers 24th Kobe....</span>
                    <div class="clear_5px"></div>
                    <div class="font12px" style="margin-top:0px;">
                    	<span>Qty</span> &nbsp; <input type="text" style="width:40px;display:inline-block;background:#F8F8F8;text-align:center;border:1px #D8D8D8 solid;font-size:12px;padding:1px;color:gray" />
                    	<span style="display:inline-block;margin:0 8px;color:lightgray;font-weight:bold">|</span>
                    	<span>Amount</span> &nbsp; <span class="skyblue" style="display:inline-block;font-weight:bold;">$233.95</span>
                    	<span style="display:inline-block;margin:0 8px;color:lightgray;font-weight:bold">|</span>
                    	<input type="button" class="btn deletebtn" style="font-size:12px;" value="delete"/>
                    </div>
				</div>
				
				<div class="textshadow shoppingcart_dragbtn">Drag me and drop</div>
			</div>

			
			<div class="clear_5px"></div>
			
			
			
		</div>

		<div class="clear_20px"></div>
		
	</div>
	
	<div class="grid_4">
		<div class="radiusall_4px whitetransparentbg30perc shadowbox" style="border:5px dotted #FFF">
			<div class="paddingbox10px droppable">
			<h2>Trash Bin <span style="font-size:0.5em !important;color:gray">(drag in &amp; drag away)</span></h2>
			<div class="clear_5px"></div>
			<a style="border:2px #FFF solid;display:inline-block;margin:0 3px 10px 3px;" href="#"><img width="72" src="http://thumbs1.ebaystatic.com/m/mf88mB523VXt_gWOwnh2ofQ/140.jpg"/></a>
			<a style="border:2px #FFF solid;display:inline-block;margin:0 3px 10px 3px;" href="#"><img width="72" src="http://thumbs2.ebaystatic.com/m/mnnb2L2xwSqFOJj-T2hwXXg/140.jpg"/></a>
			<a style="border:2px #FFF solid;display:inline-block;margin:0 3px 10px 3px;" href="#"><img width="72" src="http://thumbs3.ebaystatic.com/m/mp6ZgDOspls2gtKHenfUJ4g/140.jpg"/></a>
			<a style="border:2px #FFF solid;display:inline-block;margin:0 3px 10px 3px;" href="#"><img width="72" src="http://thumbs3.ebaystatic.com/m/mp6ZgDOspls2gtKHenfUJ4g/140.jpg"/></a>
			<div class="clear_15px"></div>
			</div>
			<div style="background:#FFF;text-align:center;font-weight:bold;padding:5px;">
				<p class="gray">Items will be cleared automatically.</p>
			</div>
		</div>
		<div class="clear"></div>
		
	</div>
	
	
	<div class="clear_20px"></div>
	

</div>
<div class="clear_30px"></div>

<div style="z-index:3;background:#000;padding:10px;text-align:center;height:40px;line-height:40px;position:fixed;top:0;width:100%;color:#FFF;font-weight:bold;" class="opacity50">
UP
</div>


</body>

</html>
